<!--
 @description 软体公用弹框
 @fileName Dialog.vue
 @author maliang
 @created 2021/12/7 09:38:12
-->
<template>
  <div class="dlg-page">
    <div class="dlg-title">{{ typeName }}</div>
    <div v-if="tabDisName.length" class="dlg-tab">
      <div
        v-for="(item, index) in tabDisName"
        :key="index"
        class="tab-item"
        :class="{ active: tabIndex === index }"
        @click="tabIndex = index"
      >
        {{ item }}
      </div>
    </div>
    <div class="core-detail-list">
      <div v-if="subclassList.length" class="tr">
        <div
          v-for="(item, index) in subclassList"
          :key="index"
          class="th"
        >
          {{ item }}
        </div>
      </div>
      <template v-if="dataList.length">
        <div class="tr">
          <div
            v-for="(item, index) in dataList"
            :key="index"
            class="td"
          >
            {{ item | filterForamtThousand }}
          </div>
        </div>
      </template>
      <div v-if="dataList.length === 0" class="no-data">
        {{ loadOver ? "暂无数据" : "加载中..." }}
      </div>
    </div>
  </div>
</template>

<script>
import { getSoftwareQuantitySubclass } from '@/apis/plankWood'
import { parseTime } from '@/utils'
export default {
  name: 'CoreDetail',
  props: {
    typeName: {
      type: String,
      default: ''
    },
    coreDate: {
      type: String,
      default: parseTime(new Date(), '{y}-{m}-{d}')
    }
  },
  data() {
    return {
      showDialog: true,
      tabIndex: 0,
      tabDisName: [],
      subclassList: [],
      orgData: [],
      loadOver: false // 是否加载完成
    }
  },
  computed: {
    dataList() {
      if (!this.loadOver) {
        return []
      }
      const subName = this.tabDisName[this.tabIndex]
      const datalist = []
      if (this.orgData.length) {
        this.orgData.forEach((item) => {
          if (subName === '今日') {
            datalist.push(item.todayQuantity || '')
          }
          if (subName === '昨日') {
            datalist.push(item.yesterdayQuantity || '')
          }
          if (subName === '本月') {
            datalist.push(item.monthQuantity || '')
          }
        })
      }
      return datalist
    }
  },
  created() {
    this.loadOver = false
    this.getSoftwareQuantitySubclass()
  },
  methods: {
    unique(arr) {
      // 如果新数组的当前元素的索引值 == 该元素在原始数组中的第一个索引，则返回当前元素
      return arr.filter(function(item, index) {
        return arr.indexOf(item, 0) === index
      })
    },
    getSoftwareQuantitySubclass() {
      getSoftwareQuantitySubclass({
        date: this.coreDate,
        bigType: this.typeName
      }).then((res) => {
        if (!res.data.length) {
          this.loadOver = true
          return
        }
        const item = res.data[0]
        if (item.todayQuantity !== undefined) {
          this.tabDisName.push('今日')
        }
        if (item.yesterdayQuantity !== undefined) {
          this.tabDisName.push('昨日')
        }
        if (item.monthQuantity !== undefined) {
          this.tabDisName.push('本月')
        }

        this.subclassList = []
        res.data.forEach((item) => {
          this.subclassList.push(item.smallType)
        })
        this.orgData = res.data
        this.loadOver = true
      })
    }
  }
}
</script>
<style lang="less" scoped>
.dlg-title {
    // margin-bottom: 10px;
    padding: 10px 0;
    line-height: 22px;
    border-bottom: 1px solid #f4f6f5;
    color: #333;
    font-size: 16px;
    letter-spacing: 1px;
    text-align: center;
    font-family: "PFZH";
}
.dlg-tab {
    width: 100%;
    height: 32px;
    background: #f5f6f7;
    display: flex;
    margin-bottom: 10px;
    .tab-item {
        flex: 1;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        font-family: PFZH;
        color: #888888;
        letter-spacing: 1px;
        text-align: center;
        &.active {
            color: #12b9a3;
            background: #ffffff;
            box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
        }
    }
}
.core-detail-list {
    display: flex;
    flex-direction: column;
    padding: 0 5px;
    font-size: 14px;
    text-align: center;
    // min-height: 102px;
    .tr {
        min-height: 24px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        color: #333333;
        letter-spacing: 1px;
    }
    .th,
    .td {
        flex: 1;
        overflow: hidden;
    }
    .th {
        font-family: "PFZH";
    }
}
</style>
